<template>
    <div class="wrapper">
        <img class="wrapper__img" src="./images/user.png" alt="user">
        <div class="wrapper__input">
            <input v-model="userName" class="wrapper__input__content" type="text" placeholder="请输入用户名">
        </div>
        <div class="wrapper__input">
            <input v-model="password" class="wrapper__input__content" type="password" placeholder="输入密码">
        </div>
        <div class="wrapper__loginButton" @click="login">登陆</div>
        <div class="wrapper__register">
            <span>立即注册</span>
            <div class="seperator"></div>
            <span>忘记密码</span>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const userName = ref('');
const password = ref('');

const login = () => {
    console.log(userName.value, password.value);
    if (userName.value.length > 0 && password.value.length > 0) {
        alert(`用户名: ${userName.value} 密码: ${password.value}`);
    } else {
        alert("请输入用户名密码");
    }
};
</script>

<style scoped>
/* 这里可以添加你的 CSS 样式 */
.wrapper {
    /* 添加你想要的样式 */
}
.wrapper__img {
    /* 添加你想要的样式 */
}
.wrapper__input {
    /* 添加你想要的样式 */
}
.wrapper__input__content {
    /* 添加你想要的样式 */
}
.wrapper__loginButton {
    /* 添加你想要的样式 */
}
.wrapper__register {
    /* 添加你想要的样式 */
}
.seperator {
    /* 添加你想要的样式 */
}
</style>
